<div id="createGroup" class="create-group reveal-modal small" data-reveal>
  <h5>Create New Group</h5>
<form>
  <div class="row">
    <div class="large-12 columns">
        <input id="txtGroupName" type="text" placeholder="Group Name" />
    </div>
  </div>
  <div class="row">
    <div class="large-12 columns">
        <select id="groupCategory">
          <option default selected>Category</option>
          <option>Homebased Baker</option>
          <option>Networking</option>
          <option>Mixed</option>
        </select>
        <div id="warning" style="display:none">NO!!!</div>
    </div>
  </div>
  <div class="row">
    <div class="large-12 columns">
        <select id="privacy">
          <option default selected>Privacy</option>
          <option>Public</option>
          <option>Private</option>
        </select>
    </div>
  </div>
</form>
  <a id="btnCreateGroup" class="right tiny radius button">Create</a>
  <a class="right tiny radius button">Cancel</a>
</div>


<div id="secondModal" class="reveal-modal" data-reveal data-options="closeOnBackgroundClick:false">
  <h2>This is a modal.</h2>
  <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
  <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
  <p><a href="#" data-reveal-id="createGroup" class="secondary button">Second Modal...</a></p>
  <a class="close-reveal-modal">&#215;</a>
</div>



<script type="text/javascript">
  $(function(){
    function createGroup(name,category,privacy){
        var params = {};
        params.name = name;
        params.category = category;
        switch(privacy){
            case "Private":
                params.privacy = 0;
            break;
            case "Public":
                params.privacy = 1;
            break;
        }
        return $.ajax({
            url: URL + 'group/create',
            data: params,
            type: 'post',
            dataType: 'json'
        });  
    }
    var $btnCreateGroup = $('#btnCreateGroup');
    $(document).ready(function(){
        $btnCreateGroup.on('click',function(){
            var group_name = $('#txtGroupName').val();
            var category = $('#groupCategory').val();
            var privacy = $('#privacy').val();
            if(!group_name){alert('Please enter the group name'); return false;}
            if(!category || category == 'Category'){alert('Enter category'); return false;}
            if(!privacy || privacy == 'Privacy'){alert('Enter privacy'); return false;}

            createGroup(group_name,category,privacy).done(function(result){
                if(result.status){
                  alert('Group Successfully Created');
                  $('#createGroup').foundation('reveal', 'close');
                }else{
                  alert(result.messages);
                }
            });

        });
    });
  });
</script>

